<template>
	<div class="breadcrumb" :style="'width:'+width+'px'">
		<ul >
			<li><a href="./">首页</a></li>
			<li v-for="item in items">{{item}}</li>
			<slot></slot>
		</ul>
	</div>
</template>

<script>
export default {
    props: {
        items: {
            type: Array,
            default: () => {}
		},
		width:{ type:Number,default:1200 }
    },
    name: "breadcrumb",
    data () {
        return {

        }
    }
}
</script>

<style lang="less">
	/*面包屑*/
	.breadcrumb {margin: 0px auto;}
	.breadcrumb ul {padding: 30px 0px;display: flex;}
	.breadcrumb ul li {color:#535353;}
	.breadcrumb ul li a{font-size:14px;color:#535353;}
	.breadcrumb ul li a:hover{color:@c-gold;}
	.breadcrumb ul li.active,.breadcrumb ul li:last-child{color:#a9b0b6 !important;}
	.breadcrumb ul li:after{content: " /";width:30px;color:#a9b0b6 !important;display: inline-block;text-align: center;}
	.breadcrumb ul li:last-child:after{content: '';}
</style>
